import React from "react";

// 1. 安装： cnpm i prop-types
// 2. 导入
import PropTypes from 'prop-types'; // ES6

const Header = function(props){
  return (<>
  <div>欢迎来到 {props.title} 世界</div>
  </>)
}
// 给属性添加数据类型的时候，函数式组件和类组件的使用方法是一样的
Header.propTypes = {
  title: PropTypes.string
}

class Content extends React.Component {
  render(){
    return (<>
      <div>
         {this.props.contentName} 学习 React 实际上是在学习 JavaScript

         {this.props.count + 1}
         </div>
    </>)
  }
}

// 给组件添加属性验证的时候
// 设置的时候使用的是 .propTypes 是小写的 p
// 添加数据类型的时候 PropTypes 是大写的 P
Content.propTypes = {
   // 指明属性传递时接收的类型
  contentName: PropTypes.string,
  // 在类型的后面可以使用 isRequired 进行设置必填项
  count: PropTypes.number.isRequired,
  // 设置多种数据类型
  flag: PropTypes.oneOfType([PropTypes.string,PropTypes.bool]),
  // 只要设置必填都可以在数据类型后添加 isRequired
  name: PropTypes.oneOfType([PropTypes.string,PropTypes.bool]).isRequired,
}

export default class App extends React.Component {
  render(){
    return (<>
      <div>
        <Header title='React' />
        <Content contentName='涛涛' count={10} flag={'true'} name='a' />
      </div>
    </>)
  }
}

